<template>
  <section>
    <el-dialog
      title="编辑"
      class="editDialog"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <el-row class="action-box">
        <el-col :span="12" v-for="(action, index) in actions" :key="index">
          <el-col :span="20">
            <action-attribute-editor v-model="actions[index]" :key="index" />
          </el-col>
          <el-col :span="4">
            <el-button
              size="mini"
              type="info"
              icon="el-icon-delete"
              @click="handleRemove(index)"
            ></el-button>
          </el-col>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="handleAdd"
        ></el-button>
      </span>
    </el-dialog>
    <el-button type="primary" @click="handleClick">{{ title }}</el-button>
  </section>
</template>

<script>
import _ from "lodash";
import ActionAttributeEditor from "./ActionAttributeEditor.vue";

export default {
  name: "ActionAttributesEditor",
  components: { ActionAttributeEditor },
  props: {
    value: {
      type: Array
    }
  },
  data() {
    return { dialogVisible: false, actions: [] };
  },
  computed: {
    title() {
      return "操作列表";
    }
  },
  created() {
    this.actions = _.cloneDeep(this.value) || [];
  },
  methods: {
    handleAdd() {
      this.actions.push({});
    },
    handleRemove(index) {
      this.actions.splice(index, 1);
    },
    handleClick() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      done();
    }
  },
  watch: {
    actions: {
      handler(newValue) {
        this.$emit("input", newValue);
      },
      deep: true
    }
  }
};
</script>

<style scoped>
.action-box {
  padding: 0 12px 0 0;
}
.el-button--mini {
  padding: 3px 6px;
  margin-left: 5px;
  margin-top: 6px;
}
.el-button + .el-button {
  margin-left: 3px;
}
.editDialog >>> .el-dialog__body {
  height: 500px;
  overflow: auto;
}
</style>
